<template>
  <div class="rr-error">
    <!-- 使用 Element Plus 的 Result 组件来展示错误信息 -->
    <el-result>
      <!-- 自定义图标插槽 -->
      <template v-slot:icon>
        <el-icon style="font-size: 64px; color: #f5222d">
          <warning /> <!-- 可以根据需要使用不同的图标组件 -->
        </el-icon>
      </template>
      
      <!-- 自定义标题插槽 -->
      <template v-slot:title>
        <span style="font-size: 48px; font-weight: 800">{{ tip.title || '错误' }}</span>
      </template>

      <!-- 自定义副标题插槽 -->
      <template v-slot:subTitle>
        <span style="font-size: 36px">{{ tip.message || '出现未知错误，请稍后重试。' }}</span>
      </template>

      <!-- 操作按钮部分 -->
      <template v-slot:extra>
        <el-space :size="30">
          <!-- 返回按钮 -->
          <el-button type="info" plain @click="onBack">返回</el-button>
          <!-- 前往主页按钮 -->
          <el-button type="primary" @click="onToHome">主页</el-button>
        </el-space>
      </template>
    </el-result>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { ref } from 'vue';

// 定义一个对象来保存提示信息
const tip = ref({
  title: '错误页面',   // 默认标题
  message: '页面不存在或遇到其他错误'  // 默认消息
});

const router = useRouter();

// 返回上一级页面的方法
const onBack = () => {
  router.go(-1); // 返回上一个页面
  ElMessage.success('返回上一页');
};

// 前往主页的方法
const onToHome = () => {
  router.push('/'); // 跳转到主页
  ElMessage.success('返回主页');
};
</script>

<style scoped>
.rr-error {
  text-align: center;
  margin-top: 50px;
}
</style>
